<template>
  <!--  天气  -->
  <div class="weather-div">
    <van-icon class="region-icon" name="location-o"/>
    <span>{{regionText}}</span>
    <p>{{tempNumber}}<span>℃</span></p>
    <p>{{tempDetails}}</p>
  </div>
</template>

<script>
  export default {
    name: "weather",
    props: {
      regionText: {
        type: String,
        default: '',
        require: true
      },
      tempNumber: {
        type: String,
        default: '',
        require: true
      },
      tempDetails: {
        type: String,
        default: '',
        require: true
      },
    },
    data() {
      return {};
    }
  }
</script>

<style scoped>
  .weather-div {
    color: white;
    font-size: 14px;
  }

  .weather-div > p {
    margin: 0;
  }

  .weather-div > :nth-child(3) {
    margin: 5px 0 5px 0;
  }

  .weather-div > .region-icon {
    margin-left: -17px;
    margin-top: -10px;
    font-size: 20px;
  }

  .weather-div > :nth-child(3) {
    position: relative;
    font-size: 37.5px;
  }

  .weather-div > :nth-child(3) > span {
    position: absolute;
    top: 5px;
    font-size: 15px;
  }


</style>
